<!--
 * @Author: quit
 * @Date: 2021-12-27 11:31:10
 * @LastEditTime: 2022-01-15 11:31:58
 * @Descripttion: 工具类
-->
<template>
    <div id="tool">
        <el-card>
            <div class="toolBox-container">
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item v-for="(item, index) in toolData" :key="index">
                        <template slot="title">
                            <svg-icon :icon-class="item.icon" />
                            {{ item.title }}
                        </template>
                        <div class="tool-item-list">
                            <div v-for="(value, key) in item.items" :key="key" class="tool-item" draggable="true" @dragstart="onDragstart($event, value)">
                                <div class="item-icon">
                                    <svg-icon :icon-class="value.icon" />
                                </div>
                                <div class="item-name">
                                    {{ value.text }}
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-card>
    </div>
</template>

<script>
import jsonBase from './data-toolbox/base.json'
import jsonChart from './data-toolbox/chart.json'
import jsonOffice from './data-toolbox/office.json'
import jsonSvg from './data-toolbox/svg.json'
// import jsonSvgDianli from './data-toolbox/svg-dianli.json'
import { mapState } from 'vuex'

export default {
    name: 'Tool',
    components: {},
    data() {
        return {
            activeName: '',
            toolData: []
        }
    },
    // 监听属性 类似于data概念
    computed: {
        ...mapState({
            appPegeData: state => state.ToPo.appPegeData
        })
    },
    // 监控data中的数据变化
    watch: {},
    created() {
        this.toolData.push(jsonBase)
        this.toolData.push(jsonChart)
        this.toolData.push(jsonOffice)
        this.toolData.push(jsonSvg)
    }, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
        // tool-item 拖拽事件 记录当前拖拽项数据
        onDragstart(event, info) {
            if (!this.appPegeData) {
                this.$message.error('请选择需要编辑的页面后在进行操作')
                return
            }
            const infoJson = JSON.stringify(info.info)
            event.dataTransfer.setData('my-info', infoJson)
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
    padding: 0;
    width: 100%;
    height: 100%;
}

.svg-icon {
    margin: 0 10px 0 5px;
}

#tool {
    width: 100%;
    height: 100%;
    .el-card {
        width: 100%;
        height: 100%;
        .toolBox-container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 0 5px;
            .tool-item-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: space-between;
                .tool-item {
                    &:hover {
                        border: 1px solid #ccc;
                        background: #ccc;
                        color: #38f;
                        border-radius: 6px;
                        cursor: pointer;
                    }
                    width: 60px;
                    margin: 5px;
                    padding: 5px;
                    color: #777;
                    border: 1px solid transparent;
                    .item-icon {
                        text-align: center;
                        .svg-icon {
                            width: 2em;
                            height: 2em;
                        }
                    }
                    .item-name {
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
